<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        #txt{color: red}

        .input{width: 156px;height: 24px;position: relative;border: solid 1px black;box-sizing: border-box;}
        .input span{position: absolute;left: 0;top:0;width: 156px;height: 24px;line-height: 24px;font-size: 13px;color: #666;text-indent: 3px;color: red}
        .input input{border: none;width: 151px;height: 20px;margin: 0;padding: 0;background: none;position: absolute;z-index: 1;outline: none;}
    </style>
</head>
<body>
    <input type="text" placeholder="这是默认提示" id="txt">
    <div class="input">
        <input type="text">
        <span>这是默认提示</span>
    </div>
</body>
<script>

    var oipt = document.querySelector(".input input");
    var omsg = document.querySelector(".input span");

    // 输入框的输入事件
    // 每触发一次输入事件，判断是否为空
    oipt.oninput = function(){
        if(this.value === ""){
            // 为空，显示提示语
            omsg.style.display = "block";
        }else{
            // 不为空，隐藏提示语
            omsg.style.display = "none";
        }
    }

</script>
</html>